<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps(["label", "subLabel", "value", "sum", "color"]);

const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const radius = "109%";
  const center = ["51%", "55%"];
  const lineWidth = 8;

  const option = {
    title: [
      {
        text: `${props.label}`,
        x: "center",
        // top: "45%",
        y: "76%",
        textStyle: {
          fontSize: 12,
          color: "#C9E9F8",
        },
      },
      {
        text: props.subLabel || "",
        x: "center",
        top: "40%",
        textStyle: {
          fontSize: 14,
          color: "#FFFFFF",
        },
      },
    ],
    series: [
      {
        name: "背景圈",
        type: "gauge",
        radius: radius,
        center: center,
        startAngle: 220,
        endAngle: -40,
        axisLine: {
          // 坐标轴线
          // roundCap: true,
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: [[1, "rgba(255,255,255,0.08)"]],
            width: lineWidth,
          },
        },
        splitLine: {
          //分隔线样式
          show: false,
        },
        axisLabel: {
          //刻度标签
          show: false,
        },
        pointer: {
          show: false,
        },
        axisTick: {
          //刻度样式
          show: false,
        },
        // detail: {
        //   show: false,
        //   offsetCenter: [0, "60%"],
        //   textStyle: {
        //     fontSize: 32,
        //     color: "#fff",
        //   },
        //   formatter: function () {
        //     return "SO2";
        //   },
        // },
      },
      // 最外层含中间数据
      {
        name: "",
        type: "gauge",
        radius: radius,
        center: center,
        startAngle: 220,
        endAngle: -45,
        min: 0,
        max: props.sum,
        axisLine: {
          show: true,
          lineStyle: {
            width: lineWidth,
            color: [[props.value / props.sum, props.color]],
          },
        },
        axisTick: {
          show: 0,
        },
        splitLine: {
          show: 0,
        },
        axisLabel: {
          show: 0,
        },
        pointer: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: props.value,
          },
        ],
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
